<template>
    <div class="pageRight">
        <div class="pageRight-title">
            新建投票
            <el-button type="success" size="small" class="pull-right">提交</el-button>
        </div>
        <div class="pageRight-cont">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="投票名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="投票权限" prop="permission">
                    <el-select v-model="ruleForm.permission" placeholder="请选择投票权限">
                        <el-option label="所有人" value="all"></el-option>
                        <el-option label="关注会员" value="member"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" required>
                    <el-col :span="11">
                        <el-form-item prop="starttime.data">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.starttime.data" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="starttime.time">
                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.starttime.time" style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间" required>
                    <el-col :span="11">
                        <el-form-item prop="endtime.data">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.endtime.data" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="endtime.time">
                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.endtime.time" style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="审核是否" prop="audit">
                    <el-switch on-text="" off-text="" v-model="ruleForm.audit"></el-switch>
                </el-form-item>
                <div class="">
                    <div>用户报名填写项</div>
                    <div>

                        <el-form label-position="top" :model="ruleForm.users"  class="demo-form-stacked" >
                            <el-row :gutter="20" v-for="(item,index) in ruleForm.users">
                                <el-col :span="7">
                                    <el-form-item label="标题" >
                                        <el-input v-model="item.title"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="类型" >
                                        <el-select  placeholder="请选择" v-model="item.type" >
                                            <el-option label="单选" value="radio"></el-option>
                                            <el-option label="多选" value="checkbox"></el-option>
                                            <el-option label="文本" value="text"></el-option>
                                            <el-option label="数字" value="number"></el-option>
                                            <el-option label="时间" value="date"></el-option>
                                            <el-option label="图片上传" value="image"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="值">
                                        <el-input v-model="item.value"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2">
                                    <el-form-item label="操作">
                                        <el-button type="danger" @click.prevent="removeUsersItem(item)">删除</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-button type="primary" icon="el-icon-plus" @click="addUsersFun">添加项</el-button>
                        </el-form>
                    </div>
                </div>

            </el-form>
        </div>
    </div>
</template>
<style>

</style>
<script>
    export default {
    data() {
      return {
        ruleForm: {
          name: '',
          permission: '',
          starttime: {
            data:'',
            time:''
          },
          endtime: {
            data:'',
            time:''
          },
          audit: false,
          users:[
            {
                title:'你好',
                type:'text',
                value:'asdasd'
            },
            {
                title:'',
                type:'',
                value:''
            },
            {
                title:'',
                type:'',
                value:''
            }
          ]
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          permission: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      handleReset() {
        this.$refs.ruleForm.resetFields();
      },
      handleSubmit(ev) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      removeUsersItem(item){
        var index = this.ruleForm.users.indexOf(item);
        if (index !== -1) {
          this.ruleForm.users.splice(index, 1)
        }
      },
      addUsersFun(){
        this.ruleForm.users.push({
            title:'',
            type:'text',
            vales:''
        });
      }
    }
  }
</script>
